<!-- NG-ZORRO -->
<div class="container">
  <div nz-row>
    <div nz-col nzSpan="18" >
      <nz-select nzPlaceHolder="请输入关键字"
      [nzLoading]="isLoading" 
      nzShowSearch 
      [nzAutoClearSearchValue]="false" nzShowArrow="false" [(ngModel)]="keyWord"
        (nzOnSearch)="onChange($event)" (keydown)="onKeyDow($event)">
        <nz-option  [nzValue]="keyWord" [nzLabel]="keyWord"></nz-option>
        <nz-option *ngFor="let o of keywordList" [nzValue]="o" [nzLabel]="o"></nz-option>
        <nz-option *ngIf="isLoading">
          <i nz-icon nzType="loading" class="loading-icon"></i>loading......
        </nz-option>
      </nz-select>
    </div>
    <div nz-col nzSpan="5">
      <button nz-button nzType="primary" nzSize="large" nzSearch (click)="onSearch()">搜索</button>
    </div>
  </div>
  <nz-spin nzTip="Loading..." [nzSpinning]="isTableLoad">
  <nz-table [nzTotal]="total" class="demo-loadmore-list" [nzData]="list">
    <tbody>
      <tr *ngFor="let item of list" class="item">
        <td class="container">
          <div>
            <a href="javascript:" class="title" [attr.id]="item.index">{{item.title}}</a>
          </div>
          <div class="content">
            <span>主题: {{item.content.theme}}</span>
            <span>所属领域: {{item.content.domain}}</span>
            <span>领域描述: {{item.content.domainDescrition}}</span>
            <span>创建时间: {{item.content.createTime}}</span>
          </div>
          <div class="keyword">
            关键字匹配:<span *ngFor="let k of item.keyWords">{{k}}</span>
          </div>
        </td>
      </tr>
    </tbody>
  </nz-table>
</nz-spin>
</div>